new Vue({
  el: '#app',
  data: {
    keywords: ['致命风华', '闪闪发光', '百炼成神', '臭弟弟', '斗破苍穹', '武动乾坤', '魔术师'],
    isFocusing: false,
    currentIndex: 0,
    animationTriggerFlag: true
  },
  computed: {
    before() {
      let keyword = this.keywords[this.currentIndex];
      return this.isFocusing ? '' : keyword;
    },
    after() {
      let keyword =
        typeof this.keywords[this.currentIndex + 1] === 'undefined'
          ? this.keywords[0]
          : this.keywords[this.currentIndex + 1];
      return this.isFocusing ? '' : keyword;
    },
    placeholder() {
      let keyword = this.keywords[this.currentIndex];
      return !this.isFocusing ? '' : keyword;
    },
    shouldAnimate() {
      return !this.isFocusing && this.animationTriggerFlag;
    }
  },
  methods: {
    animationEnded(e) {
      if (e.pseudoElement === '::after') {
        this.animationTriggerFlag = false;

        let newIndex =
          typeof this.keywords[this.currentIndex + 1] === 'undefined' ? 0 : this.currentIndex + 1;
        this.currentIndex = newIndex;

        setTimeout(() => {
          this.animationTriggerFlag = true;
        }, 1500);
      }
    },
    doSearch(e) {
      if (e.keyCode === 13) {
        alert(this.keywords[this.currentIndex]);
      }
    }
  }
});
